﻿@{
    ViewBag.Title = "AlbumTable";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<h2>Album Table</h2>

<div ng-app>
    <table ng-controller='AlbumController' border="1" class="normal_table" style="width: 50%">
      <tr ng-repeat='album in albums'>
        <td style="width: 10%">{{$index + 1}}</td>
        <td>{{album.name}}</td>
        <td style="width: 30%">{{album.duration}}</td>
      </tr>
    </table>
</div>

<script type="text/javascript">
    var albums = [
        { name: 'Southwest Serenade', duration: '2:34' },
        { name: 'Northern Light Waltz', duration: '3:21' },
        { name: 'Eastern Tango', duration: '17:45' }
    ];

    function AlbumController($scope) {
        $scope.albums = albums;
    }
</script>